<template>
    <ul class="clearfix safe_view">
        <li v-for="item in list" :key="item.Id">
            <router-link :to="'/detail/'+item.Id">
                <img v-lazy="item.img_list_url" alt />
                <h3>{{item.title}}</h3>
                <p>
                    <span class="price">￥{{item.price}}</span>
                    <span class="mack" v-html="item.mack"></span>
                </p>
            </router-link>
        </li>
    </ul>
</template>
<script>
export default {
    props: ["list"]
};
</script>
<style scoped>
li {
    float: left;
    width: 220px;
    margin: 5px;
    padding: 5px;
    /* background:white */
    transition: all 0.5s;
    border-radius: 8px;
    background: white;
}
li a {
    display: block;
}
/* li:hover{
        transform: translateY(-8px);
        box-shadow: 0 10px 10px rgba(0,0,0,0.8);
    } */
p {
    line-height: 30px;
    margin: 10px 0;
}
.price {
    color: orangered;
    font-weight: bolder;
}
h3 {
    color: #424242;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 16px;
}
.mack span {
    padding: 5px;
}
.mack {
    float: right;
}
img {
    width: 100%;
    display: block;
    height: 220px;
}
</style>
<style>
.mack span {
    padding: 2px 6px;
}
</style>